<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <link rel="stylesheet" href="../css/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
</head>
<body>
<table
        id="table"
        data-toggle="table"
        data-height="460"
        data-ajax="ajaxRequest"
        data-search="true"
        data-side-pagination="server"
        data-pagination="true">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>

<script>
  // your custom ajax request here
  function ajaxRequest(params) {
    var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'
    $.get(url + '?' + $.param(params.data)).then(function (res) {
      params.success(res)
    })
  }
</script>
</body>
</html>
